import { createStyles, Theme, withStyles } from "@material-ui/core/styles";
import { WithStyles } from "@material-ui/core/styles/withStyles";
import { Calendar } from "antd";
import moment from "moment";
import "moment/locale/zh-cn";
import * as React from "react";
import { Link } from "react-router-dom";

const styles = (theme: Theme) =>
  createStyles({
    root: {
      marginTop: "10px",
      borderRadius: "5px",
      border: "1px solid rgb(222, 241, 255)",
      "&:hover": {
        boxShadow: "0 2px 8px rgba(0, 0, 0, 0.09)",
        borderColor: "rgba(0, 0, 0, 0.09)"
      },
      "& .ant-fullcalendar-fullscreen .ant-fullcalendar-content": {
        height: "62px"
      },
      "& .ant-fullcalendar-fullscreen .ant-fullcalendar-month, .ant-fullcalendar-fullscreen .ant-fullcalendar-date": {
        height: "90px"
      }
    }
  });

interface Iprops extends WithStyles<typeof styles> {
  doctorId:string
}
/**
 * 排班信息组件
 */
class SchedulingInformation extends React.Component<Iprops> {
  private bookCss: React.CSSProperties = {
    color: "#ffffff",
    backgroundColor: "#fef4d7",
    height: "100%",
    width: "100%",
    display: "flex",
    alignItems: "center",
    justifyContent:"center"
  };
  public dateCellRender = (date: moment.Moment) => {
    if (date.isBetween(moment(), moment().add(7, "day"), "day", "[]")) {
      return (
        <div style={this.bookCss}>
          <Link to={`/order-doctor/choose-patient/${this.props.doctorId}/${date.toString()}`}>
            可预约
          </Link>
        </div>
      );
    } else {
      return;
    }
  };

  public render() {
    const { classes } = this.props;
    return (
      <div className={classes.root}>
        <Calendar
          dateCellRender={this.dateCellRender}
          validRange={[moment(), moment().add(7, "day")]}
        />
      </div>
    );
  }
}

export default withStyles(styles)(SchedulingInformation);
